<template>
	<view class="gelp-page">
		<view class="type-box">

			<!-- <span class="name1">考试状态:</span> -->
			<view class="item_type">
				<span class="item" v-for="(item,index) in typeLIst1" :class="{active:index==current}"
					@click="getData(index)">{{item.name}}</span>
			</view>

			<!-- 		  <view class="data">
		    <span class="name1">类 型:</span>
			<view class="item_type">
				 <span class="item" v-for="(item,index) in typeLIst2" :class="{active:index==current1}" @click="getclassify(item.id,index)">{{item.name}}</span>
			</view>
		   
		  </view> -->
		</view>

		<scroll-view scroll-y @scrolltolower="loadMore" class="main-box" v-show="show">
			<!-- <h3 class="top-title">所有培训计划</h3> -->
			<view class="all-train">								
					<view class="exam-item"v-for="(item,index) in paperList" @click="item.joinFlag =='0' && item.baoming=='2'  && goContent('baomingxiangqing?id='+item.id)">
						<view class="name" :title="item.name">{{item.name}}</view>
						<view class="item">
							<view class="exam-info">
								<view class="exam-left">
									<view class="stop-time">报名截至时间:&nbsp;&nbsp;{{item.baomingEndTime}}</view>
									<view class="exam-time">考试时间:&nbsp;&nbsp;{{item.startTime}}</view>
									<view class="num-status">
										<view class="person-num">
											已报名人数: {{item.userKaoshiCount}} 人
										</view>
										<span class="status" v-show="item.baoming=='1'">报名未开始</span>
										<span class="status" v-show="item.baoming=='2'">正在报名</span>
										<span class="status" v-show="item.baoming=='3'">报名结束</span>
									</view>
									
								</view>
												
								<view class="baoming_list">
									<view class="is-sign-up0" v-show="item.baoming=='1'">
										<span class="signup">报名未开始</span>
									</view>
					
									<view class="is-sign-up0" v-show="item.baoming=='3'&&item.joinFlag =='0'">
										<span class="signup">报名结束</span>
									</view>
					
					
									<view class="is-sign-up1" v-show="item.joinFlag =='0' && item.baoming=='2'"
										@click="goContent('baomingxiangqing?id='+item.id)">
										<span class="signup">我要报名</span>
									</view>
					
									<view class="is-sign-up2"
										v-show="item.joinFlag =='1' && item.educationUserKaoshi.joinFlag =='1'">
										<span class="chenggong">报名成功</span>
									</view>
					
									<view class="dengdai"
										v-show="item.joinFlag =='1' && item.educationUserKaoshi.joinFlag =='0'">
										<view class="is-sign-up3">
											<span class="yibaoming">已报名</span>
										</view>
										<span class="shenghe">等待审核</span>
									</view>
					
									<view class="dengdai"
										v-show="item.joinFlag =='1' && item.educationUserKaoshi.joinFlag =='2'">
										<view class="is-sign-up3">
											<span class="yibaoming">已报名</span>
										</view>
										<span class="shenghe">审核未通过</span>
									</view>
								</view>
					
					
							</view>
					
					
					
					
						</view>
					
						<view style="clear:both"></view>
					</view>
				
			</view>
			<nodata v-show="paperList.length==0&&start"></nodata>
			<view class="end-text" v-show="start && end &&paperList.length!=0">已经到底啦...</view>
			<button class="end-text uni-icons " v-show="load" loading="true">数据加载中...</button>
		</scroll-view>
	</view>

</template>

<script>
	import Cookies from 'js-cookie'
	import nodata from '@/components/nodata.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				end: false,
				load: false,
				start: false,
				loadingTxt: '加载更多',
				total: null,
				paperList: [],
				show: true,
				current: 0,
				current1: 0,
				typeLIst2: [],
				type: '',
				pageNo: 1,
				pageSize: 8,
				input: '',
				list1: [


				],
				typeLIst1: [{
						name: '全部',
						addClass: 'active',
					},
					{
						name: '正在报名',
						addClass: '',
					},
					{
						name: '报名结束',
						addClass: '',
					},
				],
			}
		},
		onLoad() {
			this.getData(this.current);
			// this.gettreeName();
		},

		methods: {
			loadMore() {
				if (!this.load && !this.end) {
					this.load = true;
					this.pageNo = this.pageNo + 1;
					setTimeout(() => {
						console.log(this.current, 55555)
						// this.getbaomingFlag(this.current);
						this.getData(this.current);
					}, 1000)
				}
			},
			async getPersonInfo() {
				let that = this;
				await this.$http.post("/f/userDetail")
					.then(function(response) {
						let obj = response.data;
						uni.setStorageSync("userData", JSON.stringify(obj));
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			async goContent(url) {

				await this.getPersonInfo();
				if (uni.getStorageSync('userData')) {
					this.userData = JSON.parse(uni.getStorageSync('userData'))
					console.log(this.userData, 555)
					if (this.userData.face) {
						// this.$router.push({name:url,params:item});
						uni.navigateTo({
							url: url
						})
					} else {
						let that = this;
						uni.showModal({
							title: '提示',
							content: '您没人脸照片，请先上传人脸照片！',
							success: function(res) {
								if (res.confirm) {
									uni.chooseImage({
										success: (chooseImageRes) => {
											const tempFilePaths = chooseImageRes.tempFilePaths;
											const url = that.$url + '/cloud/uploadFace';
											uni.uploadFile({
												url: url, //仅为示例，非真实的接口地址
												filePath: tempFilePaths[0],
												header: {
													token: uni.getStorageSync("token")
												},
												// formData: {
												//     'user': 'test'
												// },
												success: (uploadFileRes) => {
													console.log(uploadFileRes
														.data);
													uni.showToast({
														title: '上传成功',
														duration: 2000
													})
												},
												fail: (error) => {
													console.log(error);
													uni.showToast({
														title: '上传失败请重新上传',
														icon: 'none',
														duration: 2000
													})
												}
											});
										}
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						console.log("您没人脸照片，请先上传人脸照片！")
						this.dialogTableVisible = true;
					}

				} else {
					// this.$router.push("/login")
					uni.navigateTo({
						url: "../login/login"
					})
				}

			},
			getbaomingFlag(index) {
				if (this.current != index) {
					this.pageNo = 1;
					this.current = index;
					this.end = false;
				} else {
					this.current = index;
				}

				// this.pageNo = 1;
				// if (this.baomingFlag != num) {
				// 	this.baomingFlag = num;
				// 	this.pageNo = 1;
				// }
				if (this.current == 0) {
					this.baomingFlag = null;
				}
				if (this.current == 1) {
					this.baomingFlag = 0;
				}
				if (this.current == 2) {
					this.baomingFlag = 1;
				}
			},
			//考试类型赋值
			getclassify(id, index) {
				this.current1 = index;
				console.log(id);
				if (this.classify != id) {
					this.classify = id;
					this.getData()
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			getData(current) {
				let that = this;
				this.loading = true;

				this.getbaomingFlag(current);

				this.$http.post("/f/pagePaperByKaoshi?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize +
						"&baomingFlag=" + this.baomingFlag + "&classify=" + this.classify)
					.then(function(response) {
						console.log(response, 9090)

						that.start = true;
						let list = response.data;
						that.total = response.count;

						if (list.length != 0) {
							let starttime;
							let endtime;
							let nowtime = new Date().getTime();
							let start, end;
							list.forEach((item, i) => {
								start = item.baomingStartTime;
								start = start.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
								starttime = new Date(start).getTime()

								end = item.baomingEndTime;
								end = end.replace(/-/g, '/');
								endtime = new Date(end).getTime()

								if (starttime > nowtime) {
									//报名未开始
									item.baoming = '1'
								}
								if (starttime < nowtime && nowtime < endtime) {
									//报名开始
									item.baoming = '2'
								}
								if (endtime < nowtime) {
									//报名结束
									item.baoming = '3'
								}
								// if(!item.educationUserKaoshi){
								//   item.educationUserKaoshi = [];
								//   item.educationUserKaoshi.joinFlag = 'null'
								// }

							})
						}

						if (that.pageNo > 1) {
							that.paperList = that.paperList.concat(list);
						} else {
							that.paperList = list;
						}


						if (that.paperList.length == response.count) {
							that.end = true;
						}
						// that.paperList.reverse();
						that.load = false;
						that.loading = false;
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},

			goSearch() {
				uni.navigateTo({
					url: 'helpSearch'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			search() {

			},
			change(item) {
				this.current = item.detail.current;
			},
			goSelect() {
				console.log(222)
			},
			//得到考试的类型
			gettreeName() {
				let that = this;
				this.$http.get("/f/listPaperClassify")
					.then(function(response) {
						console.log(response, 10086)
						let list = response.data;
						if (list.length != 0) {
							list.forEach((item, i) => {
								if (item.treeName == 'a') {
									item.name = "必修"
								}
								if (item.treeName == 'b') {
									item.name = "选修"
								}
							})
							list.unshift({
								'id': '',
								'treeName': '',
								'name': '全部',
								'addClass': 'active'
							})
							that.typeLIst2 = list;
							console.log(that.typeLIst2, 99999)
						}
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			select(index) {
				this.active = index;
				this.typeList.forEach((item, i) => {
					if (i == index) {
						item.addClass = "active";
						this.type = item.id;
						this.getData();
					} else {
						item.addClass = ""
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.gelp-page {
		width: 100%;
		height: 100%;
		// overflow-y: auto;
		// background: #f7f7f7;
		position: relative;

		.type-box {
			width: 100%;
			height: 60rpx;
			// margin: 20rpx 0;
			padding: 20rpx 0;

			.item_type {
				display: flex;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				padding:5rpx 10rpx;
				justify-content: center;
			}

			.item {
				// margin-left: 10rpx;
				height: 100%;
				width: 30%;
				justify-content: center;
				// padding: 0 10rpx;
				font-size: 14px;
				color: #0076CA;
				cursor: pointer;
				text-align: center;
				border: 1rpx solid #0076CA;
			}

			.active {
				background: #0076CA;
				border-radius: 3rpx;
				color: #fff;
			}
		}

		.main-box {
			width: 100%;
			height: calc(100% - 100rpx);
			// overflow-y: scroll;

			.all-train {
				width: 100%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-bottom: 60rpx;
				.exam-item {
					background-color: white;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					width: 90%;
					border-radius:8rpx;
					box-shadow: 2px 2px 10px #409eff;
					padding: auto 0;
					background: url('../../static/img/new-exam.png') 100% 100% no-repeat;
						
					.name {
						// display: inline-block;
						border-top-left-radius: 8rpx;
						border-top-right-radius: 8rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						background: #0076CA;
						// text-indent:1em;
						color: white;
						font-size: 15px;
						text-align: center;
						font-family: PingFangSC-regular;
					}
				
					
						.line {
							border: 1px solid #0076CA;
							width: 100%;
							margin: 5px 0 5px 0;
						}
					
						.item {
							// display: flex;
							// justify-content: space-between;
							// width: 100%;
							// height: 100rpx;
							padding:20rpx 10rpx;
							// padding-right: 70rpx;
							.exam-info {
								display: flex;
								// flex-direction: column;
								width: 100%;
								justify-content: space-between;
								align-items: center;
								.exam-left{
									.stop-time {
										// width: 214rpx;
										// height: 20rpx;
										color: #9D9B9B;
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
										margin-top: 6rpx;
									}
													
									.exam-time {
										// width: 186rpx;
										// height: 20rpx;
										color: #9D9B9B;
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
										margin-top: 6rpx;
									}
									.num-status{
										display:flex;
										align-items: center;
										justify-content: space-between;
										.person-num {
											// margin-top: 50rpx;
											// width: 100%;
											// height: 20rpx;
											color: #9D9B9B;
											font-size: 14px;
											text-align: left;
											font-family: PingFangSC-regular;
											margin-top: 6rpx;
										}
										.status {
											background-color: #d01515;
											// float: left;
											width: 130rpx;
											color: #ffffff;
											font-size: 14px;
											text-align: center;
											font-family: PingFangSC-regular;
											// line-height: 80rpx;
										}
									}
									
								}
								.baoming_list {
									// width: 100%;
									height: 120rpx;
									display: flex;
									align-items: center;
									justify-content: space-evenly;
									flex-direction: column;
													
									.is-sign-up0 {
										float: right;
										cursor: pointer;
										margin-top: 24rpx;
										width: 134rpx;
										height: 50rpx;
										border-radius: 4rpx;
										background-color: rgba(157, 155, 155, 100);
										text-align: center;					
										.signup {
											line-height: 30rpx;
											width: 56rpx;
											height: 20rpx;
											color: rgba(253, 253, 255, 100);
											font-size: 14px;
											text-align: left;
											font-family: PingFangSC-regular;
										}
									}
														
									.is-sign-up1 {
										float: right;
										cursor: pointer;
										margin-top: 24rpx;
										width: 134rpx;
										height: 50rpx;
										border-radius: 4rpx;
										background-color: #0076CA;
										text-align: center;
										.signup {
											line-height: 30rpx;
											width: 56rpx;
											height: 20rpx;
											color: white;
											font-size: 14px;
											text-align: left;
											font-family: PingFangSC-regular;
										}
									}
														
									.is-sign-up2 {
										float: right;
										margin-top: 24rpx;
										width: 134rpx;
										height: 50rpx;
										border-radius: 4rpx;
										background-color: rgba(238, 92, 92, 100);
										text-align: center;										
										.chenggong {
											line-height: 30rpx;
											width: 56rpx;
											height: 20rpx;
											color: rgba(253, 253, 255, 100);
											font-size: 14px;
											text-align: left;
											font-family: PingFangSC-regular;
										}
									}
														
									.dengdai {
										display: flex;
										flex-direction: column;
										align-items: center;
										float: right;
														
										.is-sign-up3 {
											float: right;
											// margin-top: 24rpx;
											width: 134rpx;
											height: 50rpx;
											border-radius: 4rpx;
											background-color: rgba(157, 155, 155, 100);
											text-align: center;
											.yibaoming {
												line-height: 50rpx;
												width: 56rpx;
												height: 50rpx;
												color: rgba(253, 253, 255, 100);
												font-size: 14px;
												text-align: left;
												font-family: PingFangSC-regular;
											}
										}
														
										.shenghe {
											// width: 56rpx;
											height: 20rpx;
											color: rgba(242, 45, 45, 100);
											font-size: 14px;
											text-align: left;
											font-family: PingFangSC-regular;
											text-align: center;
										}
									}
												
								}
					
								
					
							}
									
					
						}
					
					}
				// .exam-item {
				// 	background-color: white;
				// 	margin-top: 20rpx;
				// 	margin-bottom: 10rpx;
				// 	width: 90%;
				// 	height: 340rpx;
				// 	box-shadow: 0px 0px 4px 2px #c8dbe5;
				// 	padding: auto 0;
				// 	// border: 1rpx solid rgba(255, 255, 255, 100);
				// 	// padding: 27rpx 17rpx 20rpx 30rpx;
				
				// 	.name {
				// 		display: inline-block;
				// 		overflow: hidden;
				// 		white-space: nowrap;
				// 		text-overflow: ellipsis;
				// 		width: 100%;
				// 		height: 50rpx;
				// 		line-height: 50rpx;
				// 		background: #0076CA;
				// 		text-indent:1em;
				// 		color: white;
				// 		font-size: 15px;
				// 		text-align: left;
				// 		font-family: PingFangSC-regular;
				// 	}
				
				// 	.line {
				// 		border: 1px solid #0076CA;
				// 		width: 100%;
				// 		margin: 5px 0 5px 0;
				// 	}
				// 		.item {
				// 			// display: flex;
				// 			// justify-content: space-between;
				// 			// width: 100%;
				// 			// padding: ;
				// 			padding: 27rpx 17rpx 20rpx 30rpx;
				// 			// height: 100rpx;
					
				// 			// padding-right: 70rpx;
				// 			.exam-info {
				// 				// display: flex;
				// 				// flex-direction: column;
				// 				width: 100%;
					
				// 				.staandname {}
					
				// 				.stop-time {
				// 					// width: 214rpx;
				// 					// height: 20rpx;
				// 					color: #9D9B9B;
				// 					font-size: 14px;
				// 					text-align: left;
				// 					font-family: PingFangSC-regular;
				// 					margin-top: 6rpx;
				// 				}
					
				// 				.exam-time {
				// 					// width: 186rpx;
				// 					// height: 20rpx;
				// 					color: #9D9B9B;
				// 					font-size: 14px;
				// 					text-align: left;
				// 					font-family: PingFangSC-regular;
				// 					margin-top: 6rpx;
				// 				}
					
				// 			}
					
				// 			.person-num {
				// 				// margin-top: 50rpx;
				// 				width: 100%;
				// 				// height: 20rpx;
				// 				color: #9D9B9B;
				// 				font-size: 14px;
				// 				text-align: left;
				// 				font-family: PingFangSC-regular;
				// 				margin-top: 6rpx;
				// 			}
					
				// 			.baoming_list {
				// 				width: 100%;
				// 				height: 80rpx;
					
				// 				.status {
				// 					margin-top: 24rpx;
				// 					float: left;
				// 					width: 160rpx;
				// 					height: 100%;
				// 					color: rgba(242, 45, 45, 100);
				// 					font-size: 14px;
				// 					font-family: PingFangSC-regular;
				// 					line-height: 80rpx;
				// 				}
					
				// 				.is-sign-up0 {
				// 					float: right;
				// 					cursor: pointer;
				// 					margin-top: 24rpx;
				// 					width: 134rpx;
				// 					height: 50rpx;
				// 					border-radius: 4rpx;
				// 					background-color: rgba(157, 155, 155, 100);
				// 					text-align: center;					
				// 					.signup {
				// 						line-height: 30rpx;
				// 						width: 56rpx;
				// 						height: 20rpx;
				// 						color: rgba(253, 253, 255, 100);
				// 						font-size: 14px;
				// 						text-align: left;
				// 						font-family: PingFangSC-regular;
				// 					}
				// 				}
					
				// 				.is-sign-up1 {
				// 					float: right;
				// 					cursor: pointer;
				// 					margin-top: 24rpx;
				// 					width: 134rpx;
				// 					height: 50rpx;
				// 					border-radius: 4rpx;
				// 					background-color: #0076CA;
				// 					text-align: center;
				// 					.signup {
				// 						line-height: 30rpx;
				// 						width: 56rpx;
				// 						height: 20rpx;
				// 						color: white;
				// 						font-size: 14px;
				// 						text-align: left;
				// 						font-family: PingFangSC-regular;
				// 					}
				// 				}
					
				// 				.is-sign-up2 {
				// 					float: right;
				// 					margin-top: 24rpx;
				// 					width: 134rpx;
				// 					height: 50rpx;
				// 					border-radius: 4rpx;
				// 					background-color: rgba(238, 92, 92, 100);
				// 					text-align: center;										
				// 					.chenggong {
				// 						line-height: 30rpx;
				// 						width: 56rpx;
				// 						height: 20rpx;
				// 						color: rgba(253, 253, 255, 100);
				// 						font-size: 14px;
				// 						text-align: left;
				// 						font-family: PingFangSC-regular;
				// 					}
				// 				}
					
				// 				.dengdai {
				// 					display: flex;
				// 					flex-direction: column;
				// 					align-items: center;
				// 					float: right;
					
				// 					.is-sign-up3 {
				// 						float: right;
				// 						// margin-top: 24rpx;
				// 						width: 134rpx;
				// 						height: 50rpx;
				// 						border-radius: 4rpx;
				// 						background-color: rgba(157, 155, 155, 100);
				// 						text-align: center;
				// 						.yibaoming {
				// 							line-height: 50rpx;
				// 							width: 56rpx;
				// 							height: 50rpx;
				// 							color: rgba(253, 253, 255, 100);
				// 							font-size: 14px;
				// 							text-align: left;
				// 							font-family: PingFangSC-regular;
				// 						}
				// 					}
					
				// 					.shenghe {
				// 						// width: 56rpx;
				// 						height: 20rpx;
				// 						color: rgba(242, 45, 45, 100);
				// 						font-size: 14px;
				// 						text-align: left;
				// 						font-family: PingFangSC-regular;
				// 						text-align: center;
				// 					}
				// 				}
				// 			}
					
					
				// 		}
					
				// 	}
					
				}
				

			}
		}

		.loading {
			line-height: 2em;
			text-align: center;
			color: #888;
			margin-top: 30rpx;
		}

		.paginatio {
			width: 100%;
			height: 80rpx;
			position: fixed;
			bottom: 0;
			text-align: center;
			display: flex;
			justify-content: space-around;

			.pag {
				display: flex;
				align-items: center;

			}
	}
</style>
